import React, { forwardRef, useContext, useState } from "react"
import useMergeProps from "@/hooks/useMergeProps"
import useResponsiveState from "./hooks/useResponsiveState";
import { ConfigContext } from "../config-provider"
import { cs } from "@/utils"
import { GridContext, GridDataCollectorContext } from "./context";
import { setItemVisible } from "./util";
const defaultProps = {
    collapsed: false,
    collapsedRows: 1,
    cols: 24,
    colGap: 0,
    rowGap: 0
}
/**
 * 栅格
 * @param {Object} props
 * @param {React.RefObject} ref
 * @param {boolean} [props.collapsed] 是否折叠
 * @param {number} [props.collapsedRows] 折叠时显示的行数
 * @param {string | string[]} [props.className] 节点类名
 * @param {number | {[key: string]: any }} [props.cols] 每一行展示的列数 响应式
 * @param {number | {[key: string]: any }} [props.colGap] 列与列之间的间距
 * @param {number | {[key: string]: any }} [props.rowGap] 行与行之间的间距
 * @param {React.CSSProperties} [props.style] 节点样式
 * @returns {React.ReactNode}
 */
const GridComponent = (gridProps, ref) => {
    const { getPrefixCls } = useContext(ConfigContext)
    const props = useMergeProps(gridProps, defaultProps)
    const {
        children,
        className,
        style,
        collapsed,
        collapsedRows,
        cols: propCols,
        colGap: propColGap,
        rowGap: propRowGap
    } = props
    const [itemDataMap, setItemDataMap] = useState(new Map())
    const cols = useResponsiveState(propCols, 24)
    const colGap = useResponsiveState(propColGap, 0)
    const rowGap = useResponsiveState(propRowGap, 0)

    const prefixCls = getPrefixCls("grid")
    const gridStyle = {
        gap: `${rowGap}px ${colGap}px`,
        gridTemplateColumns: `repeat(${cols},minmax(0px, 1fr))`
    }
    const mergeClassName = {
        [`${prefixCls}`]: true,
    }
    const classNames = cs(mergeClassName, className)
    const getItemDataList = () => {
        const list = []
        for (const [index, itemData] of itemDataMap.entries()) {
            list[index] = itemData
        }
        return list
    }
    const itemDataList = getItemDataList()

    const displayInfo = setItemVisible({
        cols,
        collapsed,
        collapsedRows,
        itemDataList
    })
    console.log(itemDataList);

    console.log(displayInfo);

    return (
        <div
            ref={ref}
            className={classNames}
            style={{
                ...gridStyle,
                ...style
            }}
        >
            <GridDataCollectorContext.Provider
                value={{
                    collectItemData(index, itemData) {
                        itemDataMap.set(index, itemData)
                        setItemDataMap(new Map([...itemDataMap]))
                    },
                    removeItemData(index) {
                        itemDataMap.delete(index)
                        setItemDataMap(new Map([...itemDataMap]))
                    }
                }}
            >
                <GridContext.Provider
                    value={{
                        cols,
                        colGap,
                        collapsed,
                        ...displayInfo,
                    }}
                >
                    {
                        React.Children.map(children, (child, index) => {
                            if (child) {
                                const childProps = {
                                    __index__: index,
                                    ...child.props
                                }
                                return React.cloneElement(child, childProps)
                            }
                            return null
                        })
                    }
                </GridContext.Provider>
            </GridDataCollectorContext.Provider>
        </div>
    )
}
const Grid = forwardRef(GridComponent)
Grid.displayName = "Grid"
export default Grid